<script setup lang="ts">
import {ClientOnly, useRouteLocale, useSiteLocaleData, withBase} from '@vuepress/client';
import {computed, h} from 'vue';
import type {FunctionalComponent} from 'vue';
import {useDarkMode, useThemeLocaleData} from '@vuepress/theme-default/lib/client/composables';

const routeLocale = useRouteLocale();
const siteLocale = useSiteLocaleData();
const themeLocale = useThemeLocaleData();
const isDarkMode = useDarkMode();

const navbarBrandLink = computed(() => themeLocale.value.home || routeLocale.value);
const navbarBrandTitle = computed(() => siteLocale.value.title);
const navbarBrandLogo = computed(() => {
  if (isDarkMode.value && themeLocale.value.logoDark !== undefined) {
    return themeLocale.value.logoDark;
  }
  return themeLocale.value.logo;
});
const NavbarBrandLogo: FunctionalComponent = () => {
  if (!navbarBrandLogo.value) return null;
  const img = h('img', {
    class: 'logo',
    src: withBase(navbarBrandLogo.value),
    alt: navbarBrandTitle.value,
  });
  if (themeLocale.value.logoDark === undefined) {
    return img;
  }
  // wrap brand logo with <ClientOnly> to avoid ssr-mismatch
  // when using a different brand logo in dark mode
  return h(ClientOnly, () => img);
};
</script>

<template>
  <a :href="navbarBrandLink">
    <NavbarBrandLogo />

    <span v-if="navbarBrandTitle" class="site-name" :class="{'can-hide': navbarBrandLogo}">
      {{ navbarBrandTitle }}
    </span>
  </a>
</template>
